<template>
  <div class="footer">
    <div class="footer-container">
      <div class="footerList">
        <div class="footerItem">
          <ul class="footerItemCon">
            <li
              v-for="flashActivity in flashActivityTimeList"
              :key="flashActivity.flashActivityId"
            >
              <div
                v-if="
                  flashActivity.flashActivityState > 0 &&
                  flashActivity.flashActivityState < 5
                "
              >
                <img
                  :src="getpictureList(flashActivity.wares.waresPicture)[0]"
                  style="height: 130px; width: 130px"
                />
                <p>{{ flashActivity.wares.waresName }}</p>
                <p>
                  {{ flashActivity.a }}<br />
                  {{ flashActivity.b }}<br />
                  {{ flashActivity.c }}
                </p>
                
                <p>
                  折扣价：{{ flashActivity.discount*flashActivity.wares.waresPrice }}
                </p>
                <p v-if="flashActivity.flashActivityState == 1">
                  <el-button v-if="changeFlashEntry(flashActivity.flashActivityId)"
                    type="text"
                    @click="open(flashActivity.flashActivityId)"
                    >点击报名
                  </el-button>
                  <el-button v-else
                    type="text"
                    >已报名
                  </el-button>
                </p>
                <p v-if="!changeFlashEntry(flashActivity.flashActivityId)&&flashActivity.flashActivityState == 3">
                  <el-button v-if="changebuy(flashActivity.flashActivityId)"
                    type="text"
                    @click="openBuy(flashActivity.flashActivityId,getFlashEntryId(flashActivity.flashActivityId),flashActivity.wares.waresId)"
                    >点击抢购
                  </el-button>
                  <el-button v-else
                    type="text"
                    >已抢购
                  </el-button>
                </p>
                <p v-else-if="changeFlashEntry(flashActivity.flashActivityId) " style = "font-size:20px;text-align: center;">
                  未报名
                </p>
                <!-- 扫码支付-->
    <el-dialog
      title="扫码支付"
      :visible.sync="dialogFormVisible1"
      width="400px"
    >
      <img :src="codeUrl" alt="图片加载中" style="margin-left: 100px" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1=false,dialogFormVisible2 = true;">银行卡</el-button>
        <el-button type="primary" @click="tiaozhuan">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="银行卡号支付" :visible.sync="dialogFormVisible2">
      <el-form :model="form1" :rules="rules" ref="form1">
        <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="card">
          <el-input v-model="form1.card" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="tiaozhuan2">确定</el-button>
      </div>
    </el-dialog>
              </div>
            </li>
          </ul>
        </div>
        <div class="footerItem">
          <ul class="footerItemCon"></ul>
        </div>
        <div class="footerItem">
          <ul class="footerItemCon"></ul>
        </div>
        <div class="footerItem">
          <ul class="footerItemCon"></ul>
        </div>
        <div class="footerItem">
          <ul class="footerItemCon"></ul>
        </div>
        <div class="footerItem"></div>
      </div>
      <div class="copyright">
        <ul class="helpLink"></ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetFlashEntryList } from "@/api";
import QRCode from "qrcode";
import { mapState } from "vuex";
export default {
  name: "Footer",

  data() {
    return {
      page: 1, //第几页
      limit: 5, //每页个数
      flashActivityBuyerId: "",
      formLabelWidth: "120px",
      form: {
        flashEntryId: "",
        flashActivityId: "",
        buyerId: "",
        buyState:"",
      },
      form1:{
        card:''
      },
      dialogFormVisible1: false,
      buyState:"",
      codeUrl: "",
      dialogFormVisible2: false,
      card: "",
      rules: {
        card: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { pattern: /^\d{4}\s{1}\d{4}\s{1}\d{4}\s{1}\d{4}\s{1}$/, message: "请输入正确的银行卡密码", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.getCodeUrl();
  },

  created() {
    this.getData();
  },
  computed: {
    ...mapState({
      buyer: (state) => state.user.buyerInfo,
      flashActivityList: (state) =>
        state.center.flashActivityList.flashActivityList,
      //flashActivityList: (state) => state.footer.flashActivityList,
      //获取用户报名列表
      flashEntryList: (state) => state.center.flashEntryList.flashEntryList,
    }),
    //给a，b，c赋值
    flashActivityTimeList() {
      let x = [];
      for (let j in this.flashActivityList) {
        let i = this.flashActivityList[j];
        if (typeof i === "object") {
          if (i.flashActivityState == 0) {
          } else if (i.flashActivityState == 1) {
            i.a = "报名结束时间:";
            i.b = i.finishTimeEntry;
            i.c = "当前可报名";
            x.push(i);
          } else if (i.flashActivityState == 2) {
            i.a = "活动开始时间:";
            i.b = i.startTime;
            i.c = "报名已结束";
            x.push(i);
          } else if (i.flashActivityState == 3) {
            i.a = "抢购结束时间:";
            i.b = i.finishTimeActivity;
            i.c = "当前可抢购";
            x.push(i);
          } else if (i.flashActivityState == 4) {
            i.a = "";
            i.b = "";
            i.c = "活动已结束";
            x.push(i);
          } else {
          }
        }
      }

      return x;
    },
    
  },
  methods: {
    handleBuyStateChange(){

    },
    getData() {
      this.$store.dispatch("getFlashActivityList", {
        page: this.page,
        limit: this.limit,
      });
      this.$store.dispatch("getFlashEntryList", {
        page: 1,
        limit: 200,
      });
    },
    //报名确认框
    async open(flashActivityId) {
      let a = this.form;
      a.buyState = 0;
      a.flashActivityId = flashActivityId;
      this.$confirm("是否报名参加活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("addFlashEntry", a);
          this.getData();
          this.$message({
            type: "success",
            message: "报名成功!",
          });
          
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //抢购确认框
    async openBuy(flashActivityId,flashEntryId,waresId,address) {
      this.$confirm("是否抢购商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("changeFlashEntry", {
            flashEntryId: flashEntryId,
            buyState: 1,
      });
      // console.log(this.buyer);
          let a= this.$store.dispatch("changeFlashActivity", flashActivityId);
          a.then((result) => {
        console.log("result：", result === "商品已抢购完");
          if(result === "商品抢购成功"){
            this.$store.dispatch("createFlashOrder", {
              waresId: waresId,
              address: this.buyer.buyerAddress,
            });
            this.dialogFormVisible1= true;
            //跳到支付页面
            //changeBuyWares(row)
          }
      })
          
      this.getData();
          this.$message({
            type: "success",
            message: "请耐心等待结果!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //增加秒杀活动
    async addFlashActivity() {
      let flashActivityForm = this.flashActivityForm;
      if (
        flashActivityForm.finishTimeActivity &&
        flashActivityForm.finishTimeEntry &&
        flashActivityForm.startTime &&
        flashActivityForm.waresNumber &&
        flashActivityForm.discount
      ) {
        if (
          // flashActivityForm.finishTimeEntry.CompareTo(
          //   flashActivityForm.startTime)
          // &&
          // flashActivityForm.startTime.CompareTo(
          //   flashActivityForm.finishTimeActivity
          // )
          1
        ) {
          this.flashActivityForm.flashActivityState = 1;
          this.flashActivityForm.sellerId = this.id;
          this.flashActivityForm.waresId = this.form.waresId;
          console.log(this.id);
         
          this.flashActivityForm.finishTimeEntry=this.datetimeinvert(this.flashActivityForm.finishTimeEntry);
          this.flashActivityForm.finishTimeActivity=this.datetimeinvert(this.flashActivityForm.finishTimeActivity);
          this.flashActivityForm.startTime=this.datetimeinvert(this.flashActivityForm.startTime);
          console.log(this.flashActivityForm.startTime);
          let result = await this.$API.commodity.reqAddFlashActivity(
            this.flashActivityForm
          );
          if (result.code == 200) {
            this.$message({
              message: result.data,
              type: "success",
            });
            this.dialogFormVisible3 = false;
            for (let f in form) {
              form[f] = "";
            }
          } else {
            return Promise.reject(new Error("false"));
          }
        } else {
          this.$message({
            message: "请确保时间没有冲突",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请确保所有值都已输入",
          type: "warning",
        });
      }
    },
    //选择抢购商品
    changeBuyWares(row) {
      this.form = this.deepClone(row) || {};
      this.fileList = [];
      for (let url of row.pictureList) {
        let picture = {};
        let name = url.match(/\/([^/]*)$/)[1];
        picture.name = name;
        picture.url = url;
        this.fileList.push(picture);
      }
      this.dialogFormVisible3 = true;
    },
    //是否报名
    changeFlashEntry(flashActivityId) {
      //迭代flashEntryList
      for(let flashEntry in this.flashEntryList){
        flashEntry = this.flashEntryList[flashEntry];
        if(flashActivityId === flashEntry.flashActivityId){
          return false;
        }
      }
      return true;
    },
    //是否已抢购
    changebuy(flashActivityId) {
      //迭代flashEntryList
      for(let flashEntry in this.flashEntryList){
        flashEntry = this.flashEntryList[flashEntry];
        // console.log(flashActivityId,flashEntry.flashActivityId,flashEntry.buyState);
        if(flashActivityId === flashEntry.flashActivityId && flashEntry.buyState === 0){
          return true;
        }
      }
      return false;
    },
    
    //获取flashActivityId对应的flashEntryId
    getFlashEntryId(flashActivityId){
      for(let flashEntry in this.flashEntryList){
        flashEntry = this.flashEntryList[flashEntry];
        if(flashActivityId === flashEntry.flashActivityId ){
          return flashEntry.flashEntryId;
        }
      }
      return false;
    },
    tiaozhuan() {
      this.dialogFormVisible1=false;
      this.dialogFormVisible2=false;
    },
    tiaozhuan2(){
      this.$refs['form1'].validate((valid) => {
          if (valid) {
            this.tiaozhuan();
          } else {
            alert('请输入正确的银行卡')
          }
        });
    },
    //获取二维码
    async getCodeUrl() {
      try {
        this.codeUrl = await QRCode.toDataURL("通过扫码方式支付成功");
      } catch (error) {
        alert(error.message);
      }
    },
    // //获取获取用户报名列表
    // async getFlashEntryList(flashActivityId) {

    //   let t=this.$store.dispatch("getFlashEntryList", {
    //     page: 1,
    //     limit: 200,
    //   });
    //   let result = await t;
    //   // console.log(result);
    //   if(result==="报名成功"){
    //     return 1;
    //   }
    //   else if(result==="报名失败"){
    //     return 0;
    //   }
    // },
    //提交报名表
    // async postFlashEntry(flashEntry) {
    //   await this.$store.dispatch("addFlashEntry", this.form);

    //   let result = await t;
    //   if(result==="报名成功"){
    //     return 1;
    //   }
    //   else if(result==="报名失败"){
    //     return 0;
    //   }
    // },
    // //提交报名表
    // async addFlashEntry() {
    //   let form = this.form;

    //   await this.$store.dispatch("addFlashEntry", this.form);
    // },
    //写一个弹框确认

    //获取商品图片
    getpictureList(pictureList) {
      return pictureList.split(";");
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  background-color: #eaeaea;

  .footer-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

    .footerList {
      padding: 20px;
      border-bottom: 1px solid #e4e1e1;
      border-top: 1px solid #e4e1e1;
      overflow: hidden;
      padding-left: 40px;

      .footerItem {
        width: 16.6666667%;
        float: left;

        h4 {
          font-size: 14px;
        }

        .footerItemCon {
          display: flex;
          li {
            padding: 10px 10px;
            background-color: white;
            line-height: 18px;
            list-style: none;
            display: inline-block;
            margin: 3px;
            margin-left: 5px;
          }
        }

        &:last-child img {
          width: 121px;
        }
      }
    }

    .copyright {
      padding: 20px;

      .helpLink {
        text-align: center;

        li {
          display: inline;

          .space {
            border-left: 1px solid #666;
            width: 1px;
            height: 13px;
            background: #666;
            margin: 8px 10px;
          }
        }
      }

      p {
        margin: 10px 0;
        text-align: center;
      }
    }
  }
}
</style>